<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: space-around;
        }

        main {
            border: 20x solid rgba(41, 37, 37, 0.686);
            margin: 60px;
            box-sizing: border-box;
            justify-content: space-between;
            display: flex;
            flex-wrap: wrap;
            width: 1000px;
            height: 800px;
        }

        main .box {
            box-sizing: border-box;
            width: 240px;
            height: 400px;
            border: 1px solid rgb(171, 171, 171);
        }

        main .box img {
            width: 100%;
            height: 80%;
        }

        main .box .bnn {
            color: antiquewhite;
            background-color: rgb(237, 46, 46);
            border: 0;
            width: 80px;
            height: 30px;
        }

        .right {
            display: flex;
            flex-direction: column;
            /* justify-content: space-between; */
            width: 400px;
            height: 800px;
            margin: 60px;
            background-color: rgb(209, 241, 240);
            position: relative;
        }

        h3 {
            margin: 20px;
            width: 100%;

        }

        .right .xia {
            /* flex: 1; */
            border-top: 1px solid gray;
            box-sizing: border-box;
            width: 400px;
            height: 680px;
            overflow-y: auto;

        }

        .right .bum {
            justify-content: space-between;
            align-items: center;
            display: flex;
            position: absolute;
            bottom: 0;
            z-index: 999;
            height: 50px;
            width: 100%;
            background-color: rgba(209, 209, 209, 0.692);
        }

        .right .bum .quanxuan .quan {
            width: 20px;
            height: 20px;
            vertical-align: bottom;
        }

        .right .bum .quanxuan .money {
            font-size: 20px;
            height: 30px;
        }

        .right .small {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            height: 150px;
            margin-bottom: 5px;
            background-color: rgb(166, 192, 192);
        }

        .right .small .zhong .imm {
            width: 80px;
        }

        .right>.small>.zhong>p {
            font-size: 12px;
            align-self: end;
        }

        .inn {
            width: 20px;
            height: 20px;
        }

        .right .small .jishi {
            line-height: 30px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: rgb(79, 79, 79);
        }

        .right .small .jiage {
            line-height: 30px;
            display: inline-block;
            height: 30px;
            background-color: rgb(79, 79, 79);
            text-align: center;
            width: 60px;
        }

        .right .small .remove {
            font-size: 18px;
        }

        .right .small .but {
            width: 20px;
            background-color: gray;
        }

        .right .small .buts {
            width: 20px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <main>
    </main>
    <div class="right">
        <h3>购物车(<span>0</span>)</h3>
        <div class="xia">
            <!-- <div class="small">
                <input class="inn" type="checkbox">
                <img class="imm" src="img/pic1.png" alt="">
                <button class="but">+</button>
                <span class="jishi"></span>
                <button class="buts">-</button>
                <span class="jiage">100</span>
                <span class="remove">删除收藏</span>
            </div> -->

        </div>
        <div class="bum">
            <div class="quanxuan">
                <input class="quan" type="checkbox">
                <span>全选</span>
            </div>
            <div class="quanxuan" >
                <button class="money">共计</button>
                <span class="moneys">0</span>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    let arr = [
        { id: 1, name: "高级办公椅", pic: 'img/pic1.png', jiage: 10000, sdd: 1, is_checked: false,  },
        { id: 2, name: "高级办公椅", pic: 'img/pic2.png', jiage: 1000, sdd: 1, is_checked: false,  },
        { id: 3, name: "电动按摩椅", pic: 'img/pic3.png', jiage: 100, sdd: 1, is_checked: false, },
        { id: 4, name: "高级办公椅", pic: 'img/pic4.png', jiage: 10, sdd: 1, is_checked: false,  },
        { id: 5, name: "老板椅", pic: 'img/pic5.png', jiage: 20000, sdd: 1, is_checked: false,  },
        { id: 6, name: "办公桌", pic: 'img/pic6.png', jiage: 50000, sdd: 1, is_checked: false, },
        { id: 7, name: "升降办公椅", pic: 'img/pic7.png', jiage: 2000, sdd: 1, is_checked: false, },
        { id: 8, name: "升降办公桌", pic: 'img/pic8.png', jiage: 5000, sdd: 1, is_checked: false, },
    ]
    let arr2 = []
    function render() {
        let mainEle = document.querySelector('main')
        mainEle.innerHTML = arr.map((item) => {
            return `
                <div class="box" data-id=${item.id} >
                    <img src="${item.pic}" alt="">
                    <span>${item.name}</span>
                    <p>${item.jiage}</p>
                    <button class= "bnn" data-id=${item.id}>加入购物车</button>
                </div>`
        }).join('')
    }




    function rendergo() {
        let xiaEle = document.querySelector('.xia')
        xiaEle.innerHTML = arr2.map((item) => {
            return `
                <div class="small"> 
                    <input class="inn" type="checkbox" ${item.is_checked ? 'checked' : ''}>
                    <div class="zhong">
                        <img class="imm" src="${item.pic}" alt="">
                        <p>${item.name}</p>
                    </div>
                    <button class="but" data-id='${item.id}'>${"+"}</button>
                    <span class="jishi">${item.sdd}</span>
                    <button class="buts" data-id='${item.id}'>${"-"}</button>
                    <span class="jiage">${item.jiage * item.sdd}</span>
                    <span class="remove" data-id='${item.id}'>删除收藏</span>
                </div>`
        }).join('')
    }
    render()
// =========================将左侧商品渲染到右边购物车=============================
    var mainEle = document.querySelector('main')
    mainEle.onclick = function (e) {
        if (e.target.tagName == 'BUTTON') {
            // console.log(e.target.tagName, '被点击了');
            //获取点击商品的下标
            let goods = arr.find(item => item.id == e.target.dataset.id)
            if (arr2.indexOf(goods) != -1) {
                goods.sdd++
            } else {
                arr2.push(goods)
            }
            rendergo();
            he()
            money()
        }
    }
     // ========================商品加号按钮=============================
    document.querySelector('.xia').onclick = (e) => {
        if (e.target.className == 'but') {
            // let id = e.target.dataset.id
            // console.log(id);
            let goods = arr.find(item => item.id == e.target.dataset.id)
            // goods.sdd++
            if (goods.sdd <= 9 && goods.sdd >= 1) {
                goods.sdd++
            } else if (goods.sdd == 10) {
                alert('亲，最多只购买10个哟！！！')
            }
            rendergo()
            he()
            money()
        }
        // ========================商品减号按钮=============================
        if (e.target.className == 'buts') {
            let goods = arr.find(item => item.id == e.target.dataset.id)
            if (goods.sdd <= 10 && goods.sdd >= 2) {
                goods.sdd--
            } else if (goods.sdd == 1) {
                alert('亲，已经最后一个咯！！！')
            }
            rendergo()
            he()
            money()
        }
        // =========================删除商品==============================
        if(e.target.className =='remove'){
            // console.log(e.target.dataset.id);
            arr2 = arr2.filter(item=>item.id != e.target.dataset.id)
            rendergo()
            he()
            money()
        }

    }
    // =========================求购买商品的总数===========================
    let spanEle = document.querySelector('h3>span')
    function he() {
        spanEle.innerHTML = arr2.reduce((prev, item) => {
            return prev +=item.sdd
        }, 0)
    }

    // ===============================求商品的总价格========================
    let moneyEle = document.querySelector('.quanxuan>.moneys')
    function money(){
        moneyEle.innerHTML = arr2.reduce((prev,item)=>{
            return prev += item.sdd *item.jiage
        },0)
    }

































</script>